<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="dist/collide.js"></script>
    <style>
      .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: black;
      }
      #draggable {
        top: 200px;
      }
      #opts {
        position: absolute;
        top: 200px;
        left: 10px;
      }
    </style>

  </head>

  <body>

    <div ng-controller="MyCtrl">
      <div class="box"></div>
      <!-- <div class="box" id="draggable"></div> -->
      <div id="opts">
        <label>
          Duration:
          <input type="number" ng-model="anim.duration">
        </label>
        <label>
          Repeat
          <input type="number" ng-model="anim.repeat">
        </label>
        <br>
        <label>
          Delay
          <input type="number" ng-model="anim.delay">
        </label>
        <br>
        <label>
          Auto reverse
          <input type="checkbox" ng-model="anim.autoReverse">
        </label>
        <br>
        <label>
          Reverse
          <input type="checkbox" ng-model="anim.reverse">
        </label>
        <br>
        <button ng-click="do(v)" ng-repeat="v in fns">{{v}}</button>
        <button ng-click="do('spring')">Spring</button>
        <button ng-click="do('gravity')">Gravity</button>
        <p>
        <input type="text" ng-model="anim.bx1">
        <input type="text" ng-model="anim.by1">
        <input type="text" ng-model="anim.bx2">
        <input type="text" ng-model="anim.by2">
        <button ng-click="do('cubic-bezier')">cubic-bezier</button>
        </p>
        <p>
          <button ng-click="toggle()">Toggle Pause/Play</button>
          <button ng-click="currentAnimation.percent(0.3)">Go to 30%</button>
        </p>
      </div>
      {{animationResult}}
    </div>

    <script>
      angular.module('myApp', [])
      .controller('MyCtrl', function($scope) {

        $scope.fns = [
          'linear',
          'ease',
          'ease-in',
          'ease-out',
          'ease-in-out'
        ];
        $scope.anim = {
          duration: 1000,
          bx1: 0.17,
          by1: 0.67,
          bx2: 0.83,
          by2: 0.67,
          direction: 'normal'
        };

        $scope.toggle = function() {
          if (!$scope.currentAnimation) return;
          if ($scope.currentAnimation.isRunning()) {
            $scope.currentAnimation.stop();
          } else {
            $scope.currentAnimation.start();
          }
        };
        var el = angular.element(document.querySelector('.box'));
        $scope.do = function(fn) {
          if(fn == 'cubic-bezier') {
            fn = 'cubic-bezier(' +
                $scope.anim.bx1 + ',' +
                $scope.anim.by1 + ',' +
                $scope.anim.bx2 + ',' +
                $scope.anim.by2 + ')';
          }
          var config = angular.extend({
            name: 'fadeIn',
            duration: 1500,
            delay: 500,
            autoReverse: false,
            repeat: 0,
            easing: fn,
          }, $scope.anim);

          if(fn == 'spring') {
            angular.extend(config, {
              easing: {
                type: 'spring',
                frequency: 15,
                friction: 200,
                initialForce: false
              }
            });
          } else if (fn == 'gravity') {
            angular.extend(config, {
              easing: {
                type: 'gravity',
                frequency: 15,
                friction: 200,
                initialForce: false
              }
            });
          }

          $scope.currentAnimation = collide.animator(config);
          $scope.currentAnimation
            .on('step', function(v) {
              el[0].style.webkitTransform = 'translate3d(' + (v * 180) + 'px, 0,0)';
            })
            .on('stop', console.log.bind(console, 'onStop. didFinish?'))
            .on('start', console.log.bind(console, 'onStart'))
            .start();
        }
      });
    </script>
  </body>
</html>
